<template>
	<div class="login-wrap">
		<el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
			<h3 class="title">用户登录</h3>
			<el-form-item prop="UserName">
				<el-input type="text" v-model="ruleForm.UserName" auto-complete="off" placeholder="账号"></el-input>
			</el-form-item>
			<el-form-item prop="UserPwd">
				<el-input type="password" v-model="ruleForm.UserPwd" auto-complete="off" placeholder="密码"></el-input>
			</el-form-item>
			<!--  <el-row>
        <el-col :span="12">
          <el-form-item prop="code">
            <el-input type="text" v-model="ruleForm.code" auto-complete="off" placeholder="图形验证码" @keyup.enter.native="submitForm('ruleForm')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="code-box">
          <img :src="ruleForm.codeimg" alt="" class="codeimg" @click="getcode()">
        </el-col>
      </el-row> -->
			<el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
			<el-form-item style="width:100%;">
				<el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')" :loading="logining">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script type="text/ecmascript-6">
	import {
		login
	} from '../api/userMG'
	import {
		setCookie,
		getCookie,
		delCookie
	} from '../utils/util'
	import md5 from 'js-md5'
	export default {
		name: 'login',
		data() {
			return {
				//定义loading默认为false
				logining: false,
				// 记住密码
				rememberpwd: false,
				ruleForm: {
					//username和password默认为空
					UserName: 'admin',
					UserPwd: '123456',
					// code: '',
					// randomStr: '',
					// codeimg: ''
				},
				//rules前端验证
				rules: {
					UserName: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					UserPwd: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}]
				}
			}
		},
		// 创建完毕状态(里面是操作)
		created() {
			this.$message({
				message: '账号密码及验证码不为空即可',
				type: 'success'
			})
			// 获取图形验证码
			//this.getcode()
			// 获取存在本地的用户名密码
			this.getuserpwd()

		},
		// 里面的函数只有调用才会执行
		methods: {
			// 获取用户名密码
			getuserpwd() {
				if (getCookie('user') != '' && getCookie('pwd') != '') {
					this.ruleForm.username = getCookie('user')
					this.ruleForm.password = getCookie('pwd')
					this.rememberpwd = true
				}
			},
			//获取info列表
			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						// console.log(123)
						//this.logining = true
						// 测试通道，不为空直接登录

						// setTimeout(() => {
						//   this.logining = false
						//   this.$store.commit('login', 'true')
						//   this.$router.push({ path: '/goods/Goods' })
						// }, 1000)

						// 注释
						// login(this.ruleForm.UserName,this.ruleForm.UserPwd).then(res => {	
						login(this.ruleForm).then(res => {
							
							if (res.success) {
								this.$message.success("登录成功");
								window.sessionStorage.setItem("UserName", this.ruleForm.UserName);
								window.sessionStorage.setItem("userId", res.userid);
								window.sessionStorage.setItem("roleNamesList", res.roleNames);
								//window.sessionStorage.setItem("token", res.token);
								//window.sessionStorage.setItem("userInfo", res.token);
								window.localStorage.setItem("userInfo", true)
								window.sessionStorage.setItem('typeNum', res.typeNum)
								this.$router.push("/goods/goods");
								// if (this.rememberpwd) {
								//   //保存帐号到cookie，有效期7天
								//   setCookie('user', this.ruleForm.username, 7)
								//   //保存密码到cookie，有效期7天
								//   setCookie('pwd', this.ruleForm.password, 7)
								// } else {
								//   delCookie('user')
								//   delCookie('pwd')
								// }			  
								//如果请求成功就让他2秒跳转路由
								// setTimeout(() => {
								// 	// 缓存token
								// 	// localStorage.setItem('logintoken', res.token)
								// 	// axios.interceptprs.request.use(function(config) {
								// 	// 	if (token) {
								// 	// 		config.headers.token=logintoken;
								// 	// 	}
								// 	// 	return config;
								// 	// },function(error){
								// 	// 	return Promise.reject(error);
								// 	// }
								// 	// );
								// 	this.logining = false

								// 	// 缓存用户个人信息									
								// 	//localStorage.setItem('userdata', JSON.stringify(res.data))
								// 	//this.$store.commit('login', 'true')
								// 	this.$router.push({
								// 		path: '/caigou/caigou'
								// 	})

								// }, 1000)
							}
							//else {
							//   this.$message.error(res.msg)
							//   this.logining = false
							//   return false
							// }
						})
					}
					// } else {
					//   // 获取图形验证码
					//   this.getcode()
					//   this.$message.error('请输入用户名密码！')
					//   this.logining = false
					//   return false
					// }
				})
			},

		}
	}
</script>

<style scoped>
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 10%;
		background-image: url();
		/* background-color: #112346; */
		background-repeat: no-repeat;
		background-position: center right;
		background-size: 100%;
	}

	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 350px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}

	.remember {
		margin: 0px 0px 35px 0px;
	}

	.code-box {
		text-align: right;
	}

	.codeimg {
		height: 40px;
	}
</style>
